<template>
	<view>
		<view class="top">
			<view class="top_title">
				<image src="../../static/images/leftMark_icon.png" @click="goBack"/>
				<text>修改密码</text>
			</view>
		</view>
		<view class="phone">
			<image src="../../static/images/login_phone.png" />
			<view class="phone_text">{{phone_show(user_info['userPhone'])}}</view>
			<view class="code" v-if="time_show == -1" @click="get_code()">获取验证码</view>
			<view class="code" v-else-if="time_show == 0" @click="get_code()">重新发送</view>
			<view class="code" v-else-if="time_show > 0">等待{{time_show}}秒</view>
		</view>
		<view class="form">
			<form @submit="submit">
				<view class="form_content" v-bind:class="[focus == 1 ? 'hover' : '']">
					<input @focus="input_focus(1)" name="verificationCode" placeholder="请输入验证码" placeholder-class="placeholder" />
				</view>
				<view class="form_content" v-bind:class="[focus == 2 ? 'hover' : '']">
					<input @focus="input_focus(2)" name="userPassword" type="password" placeholder="请输入新密码" placeholder-class="placeholder" />
				</view>
				<view class="form_content" v-bind:class="[focus == 3 ? 'hover' : '']">
					<input @focus="input_focus(3)" name="userPasswordAgain" type="password" placeholder="确认新密码" placeholder-class="placeholder" />
				</view>
				<button form-type="submit" class="submit">确定</button>
			</form>
		</view>
		
	</view>
</template>

<script>
	import {
		getVerificationCode,
		resetPassword
	} from "@/service/api/api";
	export default {
		data() {
			return {
				focus: 0,
				time_count_down: '',
				time_show: -1,
				user_info: {}
			}
		},
		created() {
			this.user_info = uni.getStorageSync('user_info')
		},
		beforeDestroy() {
			clearInterval(this.time_count_down)
			this.time_count_down = ''
		},
		methods: {
			phone_show(phone) {
				return phone.substr(0, 3) + ' ' + phone.substr(3, 4) + ' ' + phone.substr(7, 4)
			},
			create_time() {
				let that = this
				this.time_count_down = setInterval(() => {
					if (that.time_show > 0) {
						that.time_show--
					} else {
						clearInterval(that.time_count_down)
					}
				}, 1000)
			},
			get_code() {
				this.time_show = 5
				this.create_time()
				let obj = {}
				obj['userPhone'] = this.user_info['userPhone']
				getVerificationCode(obj).then((res) => {
					this.submit_loading = false
					if (res.data.code == 0) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
				})
			},
			submit(e) {
				if (e.detail.value['verificationCode'].length != 4) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (e.detail.value['userPassword'].length == 0) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (e.detail.value['userPassword'] != e.detail.value['userPasswordAgain']) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return
				}
				if (this.submit_loading) {
					return
				}
				let obj = {}
				obj['userPhone'] = this.user_info['userPhone']
				obj['userPassword'] = e.detail.value['userPassword']
				obj['verificationCode'] = e.detail.value['verificationCode']
				this.submit_loading = true
				resetPassword(obj).then((res) => {
					this.submit_loading = false
					if (res.data.code == 0) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/mine/index'
							})
						}, 2000);
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
				})
			},
			input_focus(index) {
				this.focus = index
			},
			goBack() { //返回上一层
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.submit {
		width: 690rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: linear-gradient(118deg, #61A4FC 0%, #3B86FF 100%);
		box-shadow: 0px 12px 30px rgba(116, 169, 255, 0.55);
		border-radius: 8rpx;
		text-align: center;
		color: #fff;
		position: fixed;
		bottom: 230rpx;
		left: 30rpx;
	}

	.form_content:hover {
		border-bottom: 1rpx solid #75AAFF;
	}

	.placeholder {
		color: #A1A0AE;
	}

	.phone {
		padding: 0 50rpx;
		height: 64rpx;
		line-height: 64rpx;
		padding-top: 156rpx;
		display: flex;
	}

	.phone_text {
		flex: 1;
		font-size: 40rpx;
		height: 64rpx;
		line-height: 64rpx;
		color: #43425D;
		padding-left: 8rpx;
	}

	.code {
		width: 174rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #FFFFFF;
		border: 2rpx solid #3B86FF;
		border-radius: 8rpx;
		color: #3B86FF;
		text-align: center;
		box-sizing: border-box;
		/* margin-left: 160rpx; */
	}

	.phone image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 18rpx;
	}

	.form {
		padding: 0 50rpx;
		padding-top: 230rpx;
	}

	.form_content {
		display: flex;
		border-bottom: 1rpx solid #D2D1DF;
		font-size: 32rpx;
		margin-bottom: 75rpx;
	}

	.form_content image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 25rpx;
	}

	.form_content input {
		color: #43425D;
		line-height: 75rpx;
		height: 75rpx;
		margin-left: 72rpx;
		width: 515rpx;
		font-size: 32rpx;
	}

	.top {
		padding-top: calc(var(--status-bar-height) + 88rpx);
		box-sizing: border-box;
	}

	.top_title {
		color: #43425D;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 32rpx;
		text-align: center;
		position: relative;
		font-weight: 400;
	}

	.top_title image {
		width: 21rpx;
		height: 37rpx;
		position: absolute;
		left: 34rpx;
		top: -5rpx;
	}
</style>
